<!--
 * @Author: dengyl
 * @Date: 2022-01-14 17:03:52
 * @LastEditTime: 2022-06-16 16:43:58
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 简约卡片1
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\components\card.vue
-->
<template>
  <div class="card">
    <ul>
      <li
        :class="{ 'is-active': currentIndex == index, last: index + 1 === dataList.length }"
        @click="selectHandle(index)"
        v-for="(item, index) in dataList"
        :key="index"
        :style="setStyle(item, currentIndex == index)"
      >
        <div class="title">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'TabsCard',
    props: {
      dataList: {
        type: Array,
      },
      selectTab: {
        type: Function,
      },
    },
    data() {
      return {
        currentIndex: 0,
      };
    },
    methods: {
      /**
       * @description: 切换
       */
      selectHandle(index) {
        // this.$emit('update', index);
        this.selectTab(index);

        this.currentIndex = index;
      },
      /**
       * @description: 设置样式
       * @return {*}
       */
      setStyle(item, isActive) {
        const { options } = item.sectionData;
        return {
          backgroundColor: isActive
            ? options.sections_tabSelectedColor
            : options.sections_tabBgColor,
        };
      },
    },
  };
</script>
<style scoped lang="scss">
  .card {
    > ul {
      padding: 0;
      margin: 0;
      overflow-x: auto;
      white-space: nowrap;
      list-style: none;

      > li {
        display: inline-block;
        width: 130px;
        height: 70px;
        margin: 10px 0 10px 10px;
        font-size: 12px;
        line-height: 70px;
        color: #666;
        text-align: center;
        background: rgb(243, 243, 243);
        border-radius: 6px;

        & .last {
          margin-right: 10px;
        }

        &:hover {
          cursor: pointer;
        }
      }

      .is-active {
        color: #fff;
      }

      // 解决Chrome下的滚动条样式
      &::-webkit-scrollbar {
        /* 滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1） */
        width: 4px;
        height: 4px;
      }

      &::-webkit-scrollbar-button {
        /* 滚动条两端的按钮（位置2） */
        display: none;
      }

      &::-webkit-scrollbar-track-piece {
        /* 内层轨道，滚动条中间部分（位置4） */
        width: 8px;
        background-color: #f5f5f5;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-thumb {
        /* 滚动条里面可以拖动的那部分（位置5） */
        height: 50px;
        background: #bec7d5;
        border-radius: 6px;
      }
    }
  }
</style>
